<%
    var isAdd = false;
    if(isEmpty(sku)){
        isAdd = true;
}%>
  <% 
    var headContent = {
  %>
  <style type="text/css">
 /*验证：提示信息样式 begin*/
   .am-alert-danger {
      background-color: transparent;
      border-color: transparent;
      color: red;
    }
    .am-alert {
      margin-bottom: 1em;
      padding: .625em;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    /*验证：提示信息样式 end*/
}
 </style>
 <%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form id="form"  method="POST" class="am-form" action="${base}/sku/save">
  <div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">Sku管理</strong> / <small><%if(isAdd){%>添加Sku<%}else{%>编辑Sku<%}%></small></div>
  </div>
<input type="hidden" id="id" name="sku.id" value="${sku.id!}" />
<input type="hidden" id="isAdd" name="isAdd" value="${isAdd!}" />
  <!--选项卡（tabs）begin-->
  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li class="am-active"><a href="#tab1"><%if(isAdd){%>添加sku<%}else{%>编辑sku<%}%></a></li>
    </ul>
    <div class="am-tabs-bd">
      <div class="am-tab-panel am-active" id="tab1">
          <!--验证表单元素（validate) begin-->
          <!--input begin-->
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>属性名称：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input type="text" id="name" name="sku.name" value="${sku.name!}" minlength="1" maxlength="32" placeholder="请输入1-32个字符的sku名称" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${skuNameMessages!}</div>
            </div>
          </div>
          
          <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                <span  style="color: red;">*</span>排序
              </div>
              <div class="am-u-sm-6 am-u-md-6">
                <input class="js-pattern-sort" data-validation-message="排序不能为空且只能是纯数字" type="text" name="sku.sort" placeholder="请输入排序，只能是纯数字，越小越靠前" value="${sku.sort!'1'}" required maxlength="11"/>
              </div>
              <div class="am-u-sm-2 am-u-md-4 input-msg">
                <div class="am-alert am-alert-danger">${skuSort!}</div>
              </div>
            </div>
          
          <%if(isAdd){%>
              <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span  style="color: red;">*</span>sku属性可选项：
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                  <input type="text" name="opts" value="" minlength="1" maxlength="32" placeholder="请输入1-32个字符的sku属性可选项名称" required/>
                </div>
                <div class="am-u-sm-2 am-u-md-4">
                  <button type="button" class="addInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">+</button>
                </div>
              </div>
          <%}else{%>
               <!--第一个不能删除，从for中拿出来-->
               <%for(opt in opts!){%>
                    <%if(optLP.index==1){%>
                        <div class="am-g am-form-group am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                              <span  style="color: red;">*</span>sku属性可选项：
                            </div>
                            <div class="am-u-sm-6 am-u-md-6">
                              <input type="text" name="opts_${opt.id}" value="${opt.name}" minlength="1" maxlength="32" placeholder="请输入1-32个字符的sku属性可选项名称" required/>
                            </div>
                            <div class="am-u-sm-2 am-u-md-4">
                              <button type="button" class="addInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">+</button>
                            </div>
                        </div>
                    <%}else{%>
                        <div class="am-g am-form-group am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                              sku属性可选项：
                            </div>
                            <div class="am-u-sm-6 am-u-md-6">
                              <input type="text" name="opts_${opt.id}" value="${opt.name}" minlength="1" maxlength="32" placeholder="请输入1-32个字符的sku属性可选项名称" required/>
                            </div>
                            <div class="am-u-sm-2 am-u-md-4 input-msg">
                                <div class="am-alert am-alert-danger">${skuOptMsg!}</div>
                            </div>
                        </div>
                    <%}%>
               <%}%>
          <%}%>
          <div id="container">
          </div>
          <!--Opt验证消息-->
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              &nbsp;
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <div class="am-alert am-alert-danger">${skuOptMessages!}</div>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div></div>
            </div>
          </div>
 <!--         
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>code：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input type="text" id="code" name="sku.code" value="${sku.code!}" minlength="1" maxlength="32" placeholder="请输入sku代码" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${skuCodeMessages!}</div>
            </div>
          </div>
-->
<!--
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">是否启用：</div>
            <div class="am-u-sm-6 am-u-md-6">
                <div class="switch-button"> 
                        <input id="isEnabledSwitch" type="checkbox" data-size='xs' data-am-switch  data-off-text="已停用" data-on-text="已启用"  
                        <%if(isAdd || sku.enabled==1){%>
                                checked="checked"
                        <%}else{%><%}%>
                        />
                        <input type="hidden" class="am-input-sm" name="sku.enabled" id="isEnabled"
                            value="${(isAdd || sku.enabled==1)?1:0}" />
                </div>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
 --> 
 <input type="hidden" class="am-input-sm" name="sku.enabled" id="isEnabled"
                            value="1" />        
          <!--验证表单元素（validate end-->
      </div>
      </div>
  </div>
  </form>
  <!--选项卡（tabs）end-->
  <div class="am-margin">
    <button type="button" id="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="window.location.href='${base}/sku/list'; return false;">返回上一级</button>
  </div>
  
    <script type="text/javascript">
        $(function(){
            $("#isEnabledSwitch").on('switchChange.bootstrapSwitch',function(event, state) {
              if (state.toString() == "true") {
                $("#isEnabled").val("1");
              } else {
                $("#isEnabled").val("0");
              }
            });
            $("#submit").on("click",function(){
                $("#form").submit();
            });
            
                  //自定义规则，用法：验证元素上加class="js-pattern-sort"
            if ($.AMUI && $.AMUI.validator) {
                $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
            }
            
             $("#form").validator({
        // 域通过验证时回调
        onValid: function(validity) {
          $(validity.field).closest('.am-form-group').find('.am-alert').hide();
        },
        // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
        onInValid: function(validity) {
          var $field = $(validity.field);
          var $group = $field.closest('.am-form-group');
          var $alert = $group.find('.am-alert');
          // 使用自定义的提示信息 或 插件内置的提示信息
          var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
  
          if (!$alert.length) {
            $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
            appendTo($group.find(".input-msg"));
          }
          console.log("onInValid : "+$field.val());
          $alert.html(msg).show();
        }
      });
            //动态添加、删除输入框的效果
            $(".addInput").click(function(){
                var $container = $("#container");
                var $newDiv = $("<div class='am-g am-form-group am-margin-top'></div>");
                $newDiv.append($("<div class='am-u-sm-4 am-u-md-2 am-text-right'>sku属性可选项：</div>"))
                        .append("<div class='am-u-sm-6 am-u-md-6'><input type='text' name='opts' value='' minlength='1' maxlength='32' placeholder='请输入1-32个字符的sku属性可选项名称' required/></div>")
                        .append("<div class='am-u-sm-2 am-u-md-4'><button type='button' class='deleteInput am-btn am-btn-primary am-btn-xs am-margin-top-xs'>-</button></div>");
                $container.append($newDiv);
                //为新添加的这一行的按钮添加点击事件
                $(".deleteInput").click(function(){
                    $(this).parent().parent().remove();
                });
            });
        });
    </script>
<%}%>